<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框区域</title>

    <style>
        div{
            background: aqua;
            width: 300px;
            height: 300px;

            /* 边框区域3要素
                1.边框样式 border-style
                    可选值
                    1.solid 实线
                    2.dashed 矩形虚线
                    3.dotted 圆形虚线
                    4.double 双实线

                2.边框大小 border-width
                3.边框颜色
            */

            /* 基础写法 */
            border-style: solid;
            border-width: 10px 20px;
            border-color: black antiquewhite;
            /* 
                基础写法里的值可以是一个或多个
                有4种情况：
                1.一个值  表示4个方向同时设置
                2.两个值  表示分别设置 上下 左右 区域
                3.三个值  表示分别设置 上 左右 下 区域
                4.四个值  表示分别设置 上 右 下 左 四个区域
            */
            /* 
                单例写法 单独设置某一方向的边框
            */
            border-right-color: beige;
            border-left-width: 20px;
            border-top-style: double;

            /* 复合单例写法 */
            border-bottom: aquamarine 15px double;

            /* 复合写法 */
            border: blanchedalmond 20px dotted;
        }

    </style>
</head>
<body>
    <!-- 边框区域 -->
    <!-- 用于给元素添加一块边框区域 -->
    <div>

    </div>
</body>
</html>